import React from 'react'
import { Link } from 'react-router-dom'
import { color } from '../../../utils'
import { Table, Form, Input, Button, message, Tag } from 'antd';
import http from '../../../http'

class articleList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            title: '',
            data: [],
            pageNo: 1,
            pageSize: 10,
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    key: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '标题',
                    dataIndex: 'title',
                    key: 'title'
                },
                {
                    title: '摘要',
                    dataIndex: 'summary',
                    key: 'summary',
                    width: 400
                },
                {
                    title: '分类',
                    dataIndex: 'category',
                    key: 'category',
                    render: category => (
                        category.map((v, index) => <Tag key={index} color={color[Math.floor(Math.random() * color.length)]}>{v}</Tag>)
                    )
                },
                {
                    title: '访问次数',
                    dataIndex: 'readedCount',
                    key: 'readedCount',
                    width: 100
                },
                {
                    title: '创建时间',
                    dataIndex: 'createdAt',
                    key: 'createdAt'
                },
                {
                    title: '更新时间',
                    dataIndex: 'updatedAt',
                    key: 'updatedAt'
                },
                {
                    title: '操作',
                    align: 'center',
                    width: 180,
                    render: record => (
                        <span>
                            <Button ghost type='primary' className='mr10' onClick={this.handleEdit.bind(this, record.id)}>edit</Button>
                            <Button ghost type='danger' onClick={this.handleDelete.bind(this, record.id)}>delete</Button>
                        </span>
                    )
                }
            ]
        }
    }


    componentDidMount() {
        this.getList()
    }
    async handleDelete(id) {
        const { code } = await http.post('article/destroy', { id })
        if (code === 1000) {
            message.success('删除成功')
            this.getList()
        }
    }
    handleEdit(id) {
        this.props.history.push(`/admin/article-edit/${id}`)
    }
    async getList() {
        this.setState({ loading: true })
        const params = {
            title: this.state.title,
            pageNo: this.state.pageNo,
            pageSize: this.state.pageSize
        }
        const { data } = await http.get('/article/list', params)
        data.forEach((item, index) => {
            item.index = this.state.pageSize * (this.state.pageNo - 1) + index + 1
        })
        this.setState({
            data,
            loading: false
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                await this.setState({
                    pageNo: 1,
                    title: values.title || ''
                })
                this.getList()
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form
        return (
            <div>
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <Form.Item>
                        {getFieldDecorator('title')(
                            <Input placeholder="请输入标题" allowClear={true} />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button className='mr10' type="primary" htmlType="submit">
                            search
                        </Button>
                        <Link to='/admin/article-add'>
                            <Button type='primary'>create</Button>
                        </Link>
                    </Form.Item>
                </Form>
                <Table
                    bordered
                    className='mt10'
                    loading={this.state.loading}
                    columns={this.state.columns}
                    dataSource={this.state.data}
                    rowKey={record => record.id} />
            </div>
        )
    }
}
const article = Form.create({ name: 'horizontal_login' })(articleList)

export default article
